<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>虚数之树</title>
    <link type="text/css" rel="stylesheet" href="css/default.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jscex.min.js"></script>
    <script type="text/javascript" src="js/jscex-parser.js"></script>
    <script type="text/javascript" src="js/jscex-jit.js"></script>
    <script type="text/javascript" src="js/jscex-builderbase.min.js"></script>
    <script type="text/javascript" src="js/jscex-async.min.js"></script>
    <script type="text/javascript" src="js/jscex-async-powerpack.min.js"></script>
    <script type="text/javascript" src="js/functions.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/love.js" charset="utf-8"></script>
    <style type="text/css">
        <!--
        .STYLE1 {
            color: #666666
        }
        -->
    </style>
    <script type="text/javascript">// 音乐播放
    // 定义能播放的所有音乐
    var musics = [
        "http://music.163.com/song/media/outer/url?id=1859652717.mp3",
        "http://music.163.com/song/media/outer/url?id=437250669.mp3",
    ];
    // 定义正在播放的音频文件的索引
    var index = 0;
    // 记录顺序播放、随机播放的变量
    var player;
    window.onload = function()
    {
        player = document.getElementById("player");
        // 页面加载时播放第一个音频文件
        player.src = musics[index];
        player.onended = function()
        {
            // 播放下一个音频文件
            player.src = musics[++index % musics.length];
            // 播放
            player.play();
        }
    }
    //看板
    </script>
    <script>
        !function(){
            function n(n,e,t){
                return n.getAttribute(e)||t
            }
            function e(n){
                return document.getElementsByTagName(n)
            }
            function t(){
                var t=e("script"),o=t.length,i=t[o-1];
                return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}
            }
            function o(){
                a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
                    c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
            }
            function i(){
                r.clearRect(0,0,a,c);
                var n,e,t,o,m,l;
                s.forEach(function(i,x){
                    for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
                    null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
                        l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
                        t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
                }),
                    x(i)
            }
            var a,c,u,m=document.createElement("canvas"),
                d=t(),l="c_n"+d.l,r=m.getContext("2d"),
                x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
                    function(n){
                        window.setTimeout(n,1e3/45)
                    },
                w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
                window.onmousemove=function(n){
                    n=n||window.event,y.x=n.clientX,y.y=n.clientY
                },
                window.onmouseout=function(){
                    y.x=null,y.y=null
                };
            for(var s=[],f=0;d.n>f;f++){
                var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
            }
            u=s.concat([y]),
                setTimeout(function(){i()},100)
        }();
    </script>

</head>

<body>

<audio id="player" autoplay="autoplay"></audio>

<div id="main">
    <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&amp;brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
    <div id="wrap">
        <div id="text">
            <div id="code">
                <font color="#FF0000">
                    <!--鱼油修改此处即可-->
                    <span class="say">岁月不饶人</span><br>
                    <span class="say">长辈的生日又到了</span><br>
                    <span class="say">又老了一岁</span><br>
                    <span class="say">愿你：</span><br>
                    <span class="say"> 增福增寿增富贵</span><br>
                    <span class="say">添光添彩添吉祥</span><br>
                    <span class="say"><span class="space"></span>《中国有句老话说得好》</span>
                </font>
                <p></p>
            </div>
        </div>
        <div id="clock-box"> <span class="STYLE1"></span><font color="#33CC00">祝出生</font> <span class="STYLE1"></span>
            <div id="clock"></div>
        </div>
        <canvas id="canvas" width="1100" height="680"></canvas>
    </div>
</div>
<script>
</script>
<script>
    (function(){
        var canvas = $('#canvas');

        if (!canvas[0].getContext) {
            $("#error").show();
            return false;        }

        var width = canvas.width();
        var height = canvas.height();
        canvas.attr("width", width);
        canvas.attr("height", height);
        var opts = {
            seed: {
                x: width / 2 - 20,
                color: "rgb(190, 26, 37)",
                scale: 2
            },
            branch: [
                [535, 680, 570, 250, 500, 200, 30, 100, [
                    [540, 500, 455, 417, 340, 400, 13, 100, [
                        [450, 435, 434, 430, 394, 395, 2, 40]
                    ]],
                    [550, 445, 600, 356, 680, 345, 12, 100, [
                        [578, 400, 648, 409, 661, 426, 3, 80]
                    ]],
                    [539, 281, 537, 248, 534, 217, 3, 40],
                    [546, 397, 413, 247, 328, 244, 9, 80, [
                        [427, 286, 383, 253, 371, 205, 2, 40],
                        [498, 345, 435, 315, 395, 330, 4, 60]
                    ]],
                    [546, 357, 608, 252, 678, 221, 6, 100, [
                        [590, 293, 646, 277, 648, 271, 2, 80]
                    ]]
                ]]
            ],
            bloom: {
                num: 700,
                width: 1080,
                height: 650,
            },
            footer: {
                width: 1200,
                height: 5,
                speed: 10,
            }
        }

        var tree = new Tree(canvas[0], width, height, opts);
        var seed = tree.seed;
        var foot = tree.footer;
        var hold = 1;

        canvas.click(function(e) {
            var offset = canvas.offset(), x, y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            if (seed.hover(x, y)) {
                hold = 0;
                canvas.unbind("click");
                canvas.unbind("mousemove");
                canvas.removeClass('hand');
            }
        }).mousemove(function(e){
            var offset = canvas.offset(), x, y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            canvas.toggleClass('hand', seed.hover(x, y));
        });

        var seedAnimate = eval(Jscex.compile("async", function () {
            seed.draw();
            while (hold) {
                $await(Jscex.Async.sleep(10));
            }
            while (seed.canScale()) {
                seed.scale(0.95);
                $await(Jscex.Async.sleep(10));
            }
            while (seed.canMove()) {
                seed.move(0, 2);
                foot.draw();
                $await(Jscex.Async.sleep(10));
            }
        }));

        var growAnimate = eval(Jscex.compile("async", function () {
            do {
                tree.grow();
                $await(Jscex.Async.sleep(10));
            } while (tree.canGrow());
        }));

        var flowAnimate = eval(Jscex.compile("async", function () {
            do {
                tree.flower(2);
                $await(Jscex.Async.sleep(10));
            } while (tree.canFlower());
        }));

        var moveAnimate = eval(Jscex.compile("async", function () {
            tree.snapshot("p1", 240, 0, 610, 680);
            while (tree.move("p1", 500, 0)) {
                foot.draw();
                $await(Jscex.Async.sleep(10));
            }
            foot.draw();
            tree.snapshot("p2", 500, 0, 610, 680);

            canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
            canvas.css("background", "#ffe");
            $await(Jscex.Async.sleep(300));
            canvas.css("background", "none");
        }));

        var jumpAnimate = eval(Jscex.compile("async", function () {
            var ctx = tree.ctx;
            while (true) {
                tree.ctx.clearRect(0, 0, width, height);
                tree.jump();
                foot.draw();
                $await(Jscex.Async.sleep(25));
            }
        }));

        var textAnimate = eval(Jscex.compile("async", function () {
            var together = new Date();
            together.setFullYear(2002,10 ,1); 			//时间年月日
            together.setHours(16);						//小时
            together.setMinutes(53);					//分钟
            together.setSeconds(0);					//秒前一位
            together.setMilliseconds(2);				//秒第二位

            $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
                timeElapse(together);
                $await(Jscex.Async.sleep(1000));
            }
        }));

        var runAsync = eval(Jscex.compile("async", function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());

            textAnimate().start();

            $await(jumpAnimate());
        }));

        runAsync().start();
    })();
</script>




</body>
</html>